<template>
  <div class="page-container">
    <!-- 导航栏 -->
    <nav class="main-nav">
      <div class="nav-container">
        <div class="nav-content">
          <div class="logo-group">
            <img :src="logo" alt="Logo">
            <h1>声生知音</h1>
          </div>
          <div class="nav-links">
            <a href="#intro" class="nav-link">产品介绍</a>
            <a href="#cases" class="nav-link">核心功能</a>
            <a href="#education" class="nav-link">应用场景</a>
            <a href="#contact" class="nav-link">联系我们</a>
          </div>
          <div class="auth-buttons">
            <el-button class="login-btn btn" @click="$router.push('/login')"><span>登录</span></el-button>
            <el-button class="signup-btn btn" @click="$router.push('/register')"><span>注册</span></el-button>
          </div>
        </div>
      </div>
    </nav>

    <!-- Hero区域 -->
    <div id="intro" class="hero-section">
      <div class="hero-bg">
        <img :src="hero" alt="背景" />
      </div>
      <div class="hero-content">
        <div class="hero-text">
          <h1 class="hero-title">智能声音合成平台</h1>
          <p class="hero-subtitle">让每一个声音都成为独特的艺术品，为您的内容注入灵魂</p>
        </div>
      </div>
    </div>

    <!-- 功能特点区域 -->
    <div id="cases" class="features-section">
      <div class="section-container">
        <h2>核心功能</h2>
        <p class="section-description">为您提供完整的智能语音解决方案，从录制到编辑，一站式服务满足您的所有需求</p>
        <div class="feature-grid" :class="{ 'visible': featureVisible }">
          <!-- 功能卡片循环 -->
          <div class="feature-card" v-for="(feature, index) in features" :key="index">
            <div class="card-image">
              <img :src="feature.image" :alt="feature.title" />
            </div>
            <h3>{{ feature.title  }}</h3>
            <p>{{ feature.description  }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 教育应用场景 -->
    <div id="education" class="education-section">
      <div class="section-container">
        <h2>应用场景</h2>
        <p class="section-description">为教育和企业提供全方位的智能语音解决方案</p>
        <div class="education-grid" :class="{ 'visible': educationVisible }">
          <div class="edu-card" v-for="(edu, index) in educationCases" :key="index">
            <div class="edu-image">
              <img :src="edu.image" :alt="edu.title" />
            </div>
            <div class="edu-content">
              <h3>{{ edu.title  }}</h3>
              <p>{{ edu.description  }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer id="contact" class="main-footer">
      <div class="footer-container">
        <div class="footer-grid">
          <div class="footer-col">
            <h3>关于我们</h3>
            <p>专注于AI语音合成技术研发，致力于为大家提供智能化、个性化的声音解决方案，让每个声音都成为独特的教学艺术品</p>
          </div>
          <div class="footer-col">
            <h3>产品功能</h3>
            <ul>
              <li><a href="/main/voice-library">AI语音库</a></li>
              <li><a href="/main/text-to-speech">智能配音</a></li>
              <li><a href="/main/standard-voice">语音定制</a></li>
              <li><a href="/main/ppt-creation">课件制作</a></li>
            </ul>
          </div>
          <div class="footer-col">
            <h3>技术支持</h3>
            <ul>
              <li><a href="#">新手指南</a></li>
              <li><a href="#">API文档</a></li>
              <li><a href="#">常见问题</a></li>
              <li><a href="#">技术社区</a></li>
            </ul>
          </div>
          <div class="footer-col">
            <h3>联系我们</h3>
            <ul>
              <li>邮箱：xsx15216274775@qq.com</li>
              <li>电话：15216274775</li>
            </ul>
          </div>
        </div>
        <div class="copyright">
          <p>© 2024 声生知音 - 智能语音合成平台. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>


<script setup>
  import { onMounted, ref } from 'vue';
  import logo from '@/assets/images/navLogo.webp';
  import hero from '@/assets/images/hero.webp';
  import landing1 from '@/assets/images/landing1.webp'
  import landing2 from '@/assets/images/landing2.webp'
  import landing3 from '@/assets/images/landing3.webp'
  import landing4 from '@/assets/images/landing4.webp'
  import landing5 from '@/assets/images/landing5.webp'
  import landing6 from '@/assets/images/landing6.webp'
  import landing7 from '@/assets/images/landing7.webp'
  import landing8 from '@/assets/images/landing8.webp'
  const featureVisible = ref(false);
  const educationVisible = ref(false);

  onMounted(() => {
    // 创建Intersection Observer
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.target.id === 'cases' && entry.isIntersecting && !featureVisible.value) {
          featureVisible.value = true;
        } else if (entry.target.id === 'education' && entry.isIntersecting && !educationVisible.value) {
          educationVisible.value = true;
        }
      });
    }, {
      threshold: [0.3, 0.5, 0.7],
      rootMargin: '-100px'
    });

    // 观察目标元素
    const featuresSection = document.querySelector('#cases');
    const educationSection = document.querySelector('#education');
    if (featuresSection) observer.observe(featuresSection);
    if (educationSection) observer.observe(educationSection);

    // 平滑滚动到锚点
    const links = document.querySelectorAll('a[href^="#"]');
    links.forEach(link => {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        const href = link.getAttribute('href');
        if (href) {
          const target = document.querySelector(href);
          if (target) {
            const navHeight = 72;
            const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight;
            window.scrollTo({
              top: targetPosition,
              behavior: 'smooth'
            });
          }
        }
      });
    });

    // 监听滚动事件，更新导航链接的active状态
    const sections = document.querySelectorAll('div[id]');
    const navLinks = document.querySelectorAll('.nav-link');

    const updateActiveLink = () => {
      const navHeight = 72;
      let currentSection = '';
      const scrollPosition = window.scrollY + window.innerHeight;
      const documentHeight = document.documentElement.scrollHeight;
      const scrollY = window.scrollY + navHeight;

      // 检查是否滚动到页面底部
      if (Math.abs(scrollPosition - documentHeight) < 10) {
        currentSection = 'contact';
      } else {
        sections.forEach(section => {
          const sectionTop = section.offsetTop - navHeight;
          const sectionBottom = sectionTop + section.offsetHeight;
          if (scrollY >= sectionTop && scrollY < sectionBottom) {
            currentSection = section.getAttribute('id');
          }
        });
      }

      navLinks.forEach(link => {
        link.classList.remove('active');
        if (link.getAttribute('href') === `#${currentSection}`) {
          link.classList.add('active');
        }
      });
    };

    window.addEventListener('scroll', updateActiveLink);
    updateActiveLink(); // 初始化时调用一次
  });
  const features = [
    {
      image: landing1,
      title: '语音库',
      description: '丰富的教学语音素材库，包含多种应用场景和语气风格，让您轻松找到最适合的教学语音'
    },
    {
      image: landing2,
      title: '文本转语音',
      description: '一键将文本转换为自然流畅的语音，支持多种语言，让教学内容更具吸引力'
    },
    {
      image: landing3,
      title: '个性语音讲解',
      description: '智能分析教学内容，自动调整语气语调，让每一堂课都富有感染力和教学特色'
    },
    {
      image: landing4,
      title: '课件制作',
      description: '专业的课件配音工具，支持课件内容智能分析，让您的课件制作更加轻松高效'
    }
  ];

  const educationCases = [
    {
      image: landing5,
      title: '专业配音制作',
      description: '海量优质声音素材库，涵盖多种场景和语气风格，为影视、广告、游戏等领域提供专业配音支持'
    },
    {
      image: landing6,
      title: '智能客服系统',
      description: '快速将文本转换为自然流畅的语音，支持多语言实时对话，提升客户服务体验'
    },
    {
      image: landing7,
      title: '个性化语音导航',
      description: '智能分析内容语境，自动调整语气语调，为导航、广播、展览等场景提供个性化语音服务'
    },
    {
      image: landing8,
      title: '智慧课件制作',
      description: '专业课件配音工具，支持多场景内容智能分析，让企业培训、在线教育更具吸引力'
    }
  ];

</script>



<style lang="scss" scoped>
  .page-container {
    min-height: 100vh;

    /* 导航栏样式 */
    .main-nav {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 50;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(8px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

      .nav-container {
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 32px;

        .nav-content {
          height: 72px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .logo-group {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-left: 80px;

            img {
              height: 30px;
              width: 60px;
              object-fit: contain;
            }

            h1 {
              font-size: 22px;
              font-weight: 600;
              background: linear-gradient(45deg, #2563eb, #3b82f6);
              -webkit-background-clip: text;
              background-clip: text;
              color: transparent;
              letter-spacing: 0.05em;
              text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
              font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            }
          }

          .nav-links {
            display: none;
            gap: 40px;

            @media (min-width: 768px) {
              display: flex;
            }

            .nav-link {
              position: relative;
              color: #4b5563;
              font-weight: 500;
              padding: 8px 0;
              transition: color 0.3s ease;

              &.active {
                color: #2563eb;

                &::after {
                  transform: scaleX(1);
                }
              }

              &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: #2563eb;
                transform: scaleX(0);
                transition: transform 0.3s ease;
              }

              &:hover {
                transform: translateY(-1px);
                color: #2563eb;

                &::after {
                  transform: scaleX(1);
                }
              }
            }
          }

          .auth-buttons {
            display: flex;
            gap: 10px;

            .btn {
              padding: 10px 24px;
              border-radius: 8px;
              font-weight: 500;
              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .login-btn {
              color: #4b5563;
              border: 1px solid #e5e7eb;
              background: #f2f7ff;
              padding: 14.4px 24px;

              &:hover {
                border-color: #2563eb;
                color: #2563eb;
                background: rgba(37, 99, 235, 0.1);
              }
            }

            .signup-btn {
              background: linear-gradient(45deg, #2563eb, #3b82f6);
              color: white;
              border: none;
              box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);

              &:hover {
                transform: translateY(-1px);
                box-shadow: 0 6px 12px -2px rgba(37, 99, 235, 0.3);
                background: linear-gradient(45deg, #1d4ed8, #2563eb);
              }
            }
          }
        }
      }
    }

    /* Hero区域样式 */
    .hero-section {
      position: relative;
      padding-top: 5rem;
      overflow: hidden;

      .hero-bg {
        position: absolute;
        inset: 0;
        z-index: -1;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center 65%;
        }
      }

      .hero-content {
        position: relative;
        max-width: 90rem;
        margin: 0 auto;
        padding: 8rem 1.5rem;

        .hero-text {
          max-width: 42rem;

          .hero-title {
            font-size: 4rem;
            font-weight: 800;
            color: white;
            margin-bottom: 1.5rem;
            text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: 0.02em;
            line-height: 1.2;
            transform: translateY(20px);
            opacity: 0;
            animation: fadeInUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
          }

          .hero-subtitle {
            font-size: 1.5rem;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 2rem;
            line-height: 1.6;
            font-weight: 500;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transform: translateY(20px);
            opacity: 0;
            animation: fadeInUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
          }

          @keyframes fadeInUp {
            from {
              transform: translateY(20px);
              opacity: 0;
            }

            to {
              transform: translateY(0);
              opacity: 1;
            }
          }
        }
      }
    }

    /* 功能区域样式 */
    .features-section {
      .feature-grid {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease-out;
      }

      &:has(.feature-grid.visible) .feature-grid {
        opacity: 1;
        transform: translateY(0);
      }

      padding: 80px 0;
      background: linear-gradient(to bottom, #f1f7ff 0%, rgba(189, 208, 234, 0.507) 100%);

      .section-container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 32px;

        h2 {
          font-size: 35px;
          text-align: center;
          margin-bottom: 24px;
          background: linear-gradient(45deg, #1f2937, #4b5563);
          -webkit-background-clip: text;
          color: transparent;
        }

        .section-description {
          font-size: 18px;
          color: #64748b;
          text-align: center;
          max-width: 720px;
          margin: 0 auto 80px;
          line-height: 1.6;
        }

        .feature-grid {
          display: grid;
          gap: 40px;
          grid-template-columns: repeat(auto-fit, minmax(640px, 1fr));

          .feature-card {
            min-width: 600px;
            background: white;
            border-radius: 20px;
            padding: 40px;
            transition: all 0.3s;
            border: 1px solid #f1f5f9;
            overflow: hidden;

            &:hover {
              transform: translateY(-8px);
              box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
            }

            .card-image {
              min-height: 180px;
              height: auto;
              margin-bottom: 32px;
              position: relative;
              display: flex;
              background: #f8fafc;

              img {
                width: 100%;
                height: auto;
                min-height: 240px;
                object-fit: contain;
                transition: transform 0.3s;
                flex-shrink: 0;
              }

              &:hover img {
                transform: none;
              }
            }

            h3 {
              font-size: 24px;
              color: #1f2937;
              margin-bottom: 20px;
              position: relative;
              padding-left: 28px;

              &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 20px;
                height: 4px;
                background: #2563eb;
                border-radius: 2px;
              }
            }

            p {
              color: #64748b;
              line-height: 1.7;
              font-size: 16px;
            }
          }
        }
      }
    }

    /* 教育场景样式 */
    .education-section {
      .education-grid {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease-out;
      }

      &:has(.education-grid.visible) .education-grid {
        opacity: 1;
        transform: translateY(0);
      }

      padding: 80px 0;
      background: linear-gradient(to bottom, #c0d8f6 0%, white 100%);

      .section-container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 32px;

        h2 {
          font-size: 32px;
          font-weight: 700;
          color: #1f2937;
          text-align: center;
          margin-bottom: 24px;
        }

        .section-description {
          font-size: 18px;
          color: #64748b;
          text-align: center;
          max-width: 720px;
          margin: 0 auto 80px;
          line-height: 1.6;
        }

        .education-grid {
          display: grid;
          gap: 60px;
          grid-template-columns: repeat(2, 1fr);

          .edu-card {
            display: flex;
            gap: 40px;

            border-radius: 24px;
            padding: 32px;


            .edu-image {
              width: 192px;
              height: 192px;
              flex-shrink: 0;
              border-radius: 16px;
              overflow: hidden;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.3s;
              }

              &:hover img {
                transform: scale(1.05);
              }
            }

            .edu-content {
              flex: 1;

              h3 {
                font-size: 24px;
                font-weight: 700;
                color: #1f2937;
                margin-bottom: 16px;
              }

              p {
                color: #64748b;
                line-height: 1.8;
                font-size: 16px;
              }
            }
          }
        }
      }
    }

    /* 页脚样式 */
    .main-footer {
      background: #1a2436;
      color: white;
      padding: 80px 0 40px;

      .footer-container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 32px;

        .footer-grid {
          display: grid;
          gap: 48px;
          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
          padding-bottom: 48px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);

          .footer-col {
            &:first-child {
              max-width: 80%;
            }
            h3 {
              font-size: 20px;
              font-weight: 600;
              margin-bottom: 24px;
              background: linear-gradient(135deg, #60a5fa, #3b82f6);
              -webkit-background-clip: text;
              background-clip: text;
              color: transparent;
              position: relative;
              padding-bottom: 12px;

              &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 48px;
                height: 2px;
                background: linear-gradient(90deg, #60a5fa, #3b82f6);
                border-radius: 2px;
              }
            }
            p, li {
              color: rgba(255, 255, 255, 0.8);
              line-height: 1.8;
              font-size: 15px;
              letter-spacing: 0.3px;
            }

            ul {
              li {
                margin-bottom: 14px;
                transition: all 0.3s ease;

                &:hover {
                  transform: translateX(8px);

                  a {
                    color: #60a5fa;
                    text-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
                  }
                }

                a {
                  color: rgba(255, 255, 255, 0.8);
                  transition: all 0.3s ease;
                  position: relative;
                  
                  &::after {
                    content: '';
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                    width: 0;
                    height: 1px;
                    background: #60a5fa;
                    transition: width 0.3s ease;
                  }

                  &:hover::after {
                    width: 100%;
                  }
                }
              }
            }
          }
        }

        .copyright {
          text-align: center;
          padding-top: 32px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.6);
          letter-spacing: 0.5px;
        }
      }
    }

    @media (max-width: 768px) {
      .hero-content {
        padding: 120px 24px !important;

        h1 {
          font-size: 40px !important;
        }
      }

      .feature-grid,
      .education-grid {
        grid-template-columns: 1fr !important;
      }

      .edu-card {
        flex-direction: column !important;

        .edu-image {
          width: 100% !important;
        }
      }
    }
  }
</style>